<template>
  <div>
    <!-- 箱子列表 2018/3/7 12:18 zhangQ -->
    <!--         <section class="topBtn">
                <button type="button" class="btnDelete">确认删除</button>
                <Checkbox
                :indeterminate="indeterminate"
                :checked="checkAll"
                @click.prevent="handleCheckAll">全选</Checkbox>
            </section> -->
      <Row>
          <i-col >
              <Form label-position="right" inline>

                  <FormItem label="箱号：">
                      <Input type="text" v-model="queryParam.like" placeholder="请输入查询条件"></Input>
                  </FormItem>
                  <FormItem>
                      <Button type="primary" @click="handleSearch" icon="ios-search">
                          搜索
                      </Button>
                  </FormItem>

              </Form>
          </i-col>
      </Row>
      <i-button type="primary" icon="ios-reload" style="margin-bottom:5px;" @click="refashList">刷新</i-button>
      <i-button type="primary" style="margin-bottom:5px;" @click="addContainer">新增箱号</i-button>
      <i-button type="error" style="margin-bottom:5px;" @click="batchDelContainer">批量删除</i-button>

    <i-table ref="tableList" border :content="self" :columns="columns7" :data="tableData.rows"></i-table>
    <Page style="float:right;margin-top:5px" show-total :current="tableData.pagination.pageNo" :page-size="tableData.pagination.pageSize" :total="tableData.pagination.total" show-elevator show-sizer @on-change="CurrentChange" @on-page-size-change="sizeChange"></Page>
    <Modal
      :visible.sync="modal1"
      v-model="modal1"
      title="箱子跟踪信息"
      class-name="vertical-center-modal">
      <Table border :columns="columns1" :data="tableDataDetail.rows"></Table>
      <div slot="footer">
      </div>
    </Modal>
    <Modal
      v-model="modal2"
      title="添加箱号">

      <Tabs value="name1">
        <TabPane label="单个箱号" name="name1">
          <Form ref="ruleForm" :model="ruleForm" :rules="ruleForm">
            <FormItem label="单个箱号">
              <Input v-model="ruleForm.containerNo" placeholder="请输入单个箱号" style="width: 150px"></Input>
            </FormItem>

            <FormItem>
              <Button type="info" @click="handleSubmit(ruleForm)">添加单个箱号</Button>
            </FormItem>
          </Form>
        </TabPane>
        <TabPane label="多个箱号" name="name2">
          <Form ref="ruleForm2" :model="ruleForm2" :rules="ruleForm2" style="margin-left:10px">
            <FormItem label="箱号头部信息">
              <Input v-model="ruleForm2.containerHead" placeholder="请输入箱号头部信息" style="width: 150px"></Input>
            </FormItem>
            <FormItem label="箱号开始数字">
              <Input v-model="ruleForm2.containerBodyStart" placeholder="请输入箱号开始数字" style="width: 150px"></Input>
            </FormItem>
            <FormItem label="箱号结束数字">
              <Input v-model="ruleForm2.containerBodyEnd" placeholder="请输入箱号结束数字" style="width: 150px"></Input>
            </FormItem>
            <FormItem>
              <Button type="info" @click="handleSubmit2(ruleForm2)">添加多个箱号</Button>
            </FormItem>
          </Form>
        </TabPane>
        <TabPane label="导入EXCEL" name="name3">
          <Form ref="ruleForm" :model="ruleForm3" :rules="ruleForm3">
              <FormItem >
                  1、下载 <a style="color: #1E9FFF" target="_blank" href="/static/import_template.xlsx" >导入模板</a>
              </FormItem>
              <FormItem label="2、导入文件">
                  <Upload ref="upload" name="upload" action="//jsonplaceholder.typicode.com/posts/"
                          :format="['xls','xlsx']"
                          :before-upload="handleUploadBeforeUpload"
                          :on-error="handleUploadError"
                          :on-format-error="handleUploadFormatError"
                  >
                      <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button><span>{{uploadFile.name}}</span>
                  </Upload>

              </FormItem>
              <FormItem label="* 支持xls、xlsx格式"></FormItem>
              <FormItem label="* 文件大小 <10MB"></FormItem>

              <FormItem>
                  <Button type="info" @click="handleSubmit3(ruleForm3)">导入</Button>
              </FormItem>
          </Form>
        </TabPane>
      </Tabs>

      <div slot="footer">
      </div>
    </Modal>
  </div>
</template>
<script>
  import { getContainerList, putcontainer, putContainerList, deleteContainers, batchDeleteContainers, getContainerPosition, putExcelContainerList } from '@api/backEnd/containerControl'
  import { editDriver } from '@api/backEnd/fleetControl'
  // import excelTemplate from '@/assets/import_template.xlsx'

  export default {
    name: 'containerList',
    data () {
      return {
        // excelTemplate: excelTemplate,
        modal1: false,
        modal2: false,
        indeterminate: true,
        checkAll: false,
        a: 1,
        self: this,
        queryParam: {
          like: ''
        },
        columns7: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '箱号',
            key: 'container_no'
          },
          {
            title: '最近一条动态',
            key: 'content'
          },
          {
            title: '最近一条动态',
            key: 'time'
          },
          {
            title: '滞留时间',
            key: 'dwell_time',
            render: (h, params) => {
              return h('div', params.row.dwell_time === '' ? '' : params.row.dwell_time + '小时')
            }
          },
          {
            title: '空重',
            key: 'heavy_or_empty'
          },
          {
            title: '状态',
            key: 'status'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '8px'
                  },
                  on: {
                    click: (value, row) => {
                      this.modal1 = true
                      let containerNo = params.row.container_no
                      this.ContainerPosition(containerNo)
                    }
                  }
                }, '查看详情'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      let id = params.row.container_no
                      this.dataDelete(id)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        columns1: [
          {
            title: '发站',
            key: 'start'
          },
          {
            title: '到站',
            key: 'end'
          },
          {
            title: '当前站',
            key: 'now'
          },
          {
            title: '最后操作时间',
            key: 'time',
            sortable: true
          }
        ],
        tableData: {
          pagination: {
            total: 0,
            pageNo: 1,
            pageSize: 10,
            parentId: 0

          },
          rows: []
        },
        tableDataDetail: {
          rows: []
        },
        ruleForm: {
          containerNo: ''
        },
        ruleForm2: {
          containerHead: '',
          containerBodyStart: '',
          containerBodyEnd: ''
        },
        ruleForm3: {

        },
        truckNoList: [],
        cityList: [],
        uploadFile: {
          name: ''
        }
      }
    },
    watch: {
      modal2 () {
        this.ruleForm2 = {
          containerNo: ''
        }
        this.ruleForm = {
          containerHead: '',
          containerBodyStart: '',
          containerBodyEnd: ''
        }
      }
    },
    computed: {},
    methods: {
      handleSubmit (val) {
        putcontainer({
          containerNo: val.containerNo
        }).then(res => {
          if (+res.data.isSuccess === 1) {
            this.$Message.info('添加成功')
            this.loadData()
          } else {
            this.$Message.info(res.data.res)
          }
        })
      },
      handleSubmit2 (val) {
        putContainerList({
          containerHead: val.containerHead,
          containerBodyStart: val.containerBodyStart,
          containerBodyEnd: val.containerBodyEnd
        }).then(res => {
          console.log(res.data)
          if (+res.data.isSuccess === 1) {
            this.$Message.info(res.data.res)
            this.loadData()
          } else {
            this.$Message.info(res.data.res)
          }
        })
      },
      handleSearch () {
        this.tableData.pagination.pageNo = 1
        console.log(this.queryParam.like)
        this.loadData()
      },
      editDriver (val) {
        if (!val.pwd) val.pwd = ''
        editDriver(val).then(res => {
          if (+res.data.isSuccess === 1) {
            this.$Message.info('修改成功')
            this.loadData()
            this.modal1 = false
          } else {
            this.$Message.info(res.data.res)
          }
        })
      },
      remove (index) {
        this.data6.splice(index, 1)
      },
      CurrentChange (val) {
        this.tableData.pagination.pageNo = val

        this.loadData()
      },
      sizeChange (val) {
        this.tableData.pagination.pageNo = 1
        this.tableData.pagination.pageSize = val
        this.loadData()
      },
      loadData () {
        getContainerList({
          page: this.tableData.pagination.pageNo,
          pageSize: this.tableData.pagination.pageSize,
          like: this.queryParam.like
        })
          .then(res => {
            console.log(res.data)
            if (+res.data.isSuccess === 1) {
              this.tableData.rows = res.data.data.list
              this.tableData.pagination.total = res.data.data.total
              console.log(this.tableData)
            } else {
              // alert(res.data.res)
              this.$Message.info(res.data.res)
              this.tableData.rows = ''
              this.tableData.pagination.total = 0
            }
          })
      },
      ContainerPosition (id) {
        getContainerPosition({
          containerNo: id,
          page: 1,
          pageSize: 10
        }).then(res => {
          console.log(res.data)
          if (+res.data.isSuccess === 1) {
            this.tableDataDetail.rows = res.data.data.list
          }
        })
      },
      dataDelete (val) {
        this.$Modal.confirm({
          content: '确定删除？',
          onOk: () => {
            deleteContainers({
              containers: val
            }).then(res => {
              console.log(res.data)
              if (+res.data.isSuccess === 1) {
                this.loadData()
                this.$Message.info('删除成功')
              } else {
                this.$Message.info(res.data.res)
              }
            })
          }
        })
      },
      batchDelContainer (val) {
        console.log('批量删除容器')
        this.$Modal.confirm({
          content: '确定删除？',
          onOk: () => {
            //  弹窗
            console.log(this.$refs.tableList.getSelection())
            let ids = ''
            let delControlerList = this.$refs.tableList.getSelection()
            for (let i = 0; i < delControlerList.length; i++) {
              ids = ids + delControlerList[i].container_no + ','
            }
            // console.log(ids[ids.length - 1])
            if (ids[ids.length - 1] === ',') {
              ids = ids.substr(0, ids.length - 1)
            }
            console.log(ids)
            batchDeleteContainers({
              ids: ids
            }).then(res => {
              console.log(res.data)
              if (+res.data.isSuccess === 1) {
                this.loadData()
                this.$Message.info('删除成功')
              } else {
                this.$Message.info(res.data.res)
              }
            })
          }
        })
      },
      addContainer (val) {
        this.modal2 = true
      },
      refashList () {
        this.tableData.pagination.pageNo = 1
        this.loadData()
      },
      handleUploadBeforeUpload (file, fileList) {
        console.log(file)
        let reader = new FileReader()
        reader.readAsDataURL(file)
        const _this = this
        reader.onloadend = function (e) {
          file.url = reader.result
          console.log(file)
          _this.uploadFile = file
        }
        return false
      },
      handleUploadError (e, file, fileList) {
        console.log('uploaderr')
      },
      handleUploadFormatError (e, file, fileList) {
        console.log('handleUploadFormatError')
        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '文件 ' + file.name + ' 格式不正确，请上传 xls 或 xlsx 格式的图片。'
        })
      },
      handleSubmit3 (val) {
        if (this.uploadFile.name === '') {
          console.log('未上传文件')
        }
        let formData = new FormData()
        formData.append('file', this.uploadFile)
        putExcelContainerList(formData).then(res => {
          // this.$Message.info(res.data.res)
          alert(res.data.res)
          this.modal2 = false
          console.log(res)
        })
      }
    },
    created () {
      this.loadData()
    },

    components: {}
  }
</script>
<style scoped>

</style>
